<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>画板</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div style="display: flex;align-items: center;
    flex-direction: column;position: absolute;left:50%;transform: translateX(-50%);" >
      <h1>这是一个canvas画板</h1>
    <span style="color: #666;">(按下鼠标画下一笔吧)</span>
    </div>
    <canvas id="canvas" width="150" height="150"></canvas>
    <script>
      let canvas = document.getElementById("canvas");
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
      let ctx = canvas.getContext("2d");
      let painting = false;
      let last
      ctx.fillStyle = "black"
      ctx.strokeStyle = 'none'
      ctx.lineWidth=5; //粗细
      ctx.lineCap='round'//转角变圆

      var isTouchDevice = 'ontouchstart' in 
      document.documentElement;

      function drawLine(x1,y1,x2,y2){
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
      }
        canvas.onmousedown = (e) => {
        painting = true;
        last=[e.clientX, e.clientY]
      }; 

      canvas.onmousemove = (e) => {         
        if (painting === true) {
            drawLine(last[0],last[1],e.clientX,e.clientY)
            last=[e.clientX, e.clientY]
        }
      }
        canvas.onmouseup = () => {
          painting =false 
        }


      // ctx.fillStyle = 'black'
      // ctx.strokeStyle = 'none'

    </script>
  </body>
</html>
